﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站右侧功能栏</title>

    @include("frontend/bootstrap/common/css")


    <style>
        .sidebar-container {
            max-width: 360px;
            padding: 1.5rem 0.75rem;
        }

    </style>
</head>
<body>
<div class="sidebar-container ms-auto">
    <!-- 当前用户信息 -->
@include("frontend/bootstrap/sidebar/sidebar6")

    <!-- 通知 -->
@include("frontend/bootstrap/sidebar/sidebar1")

    <!-- 推荐文章 -->
@include("frontend/bootstrap/sidebar/sidebar2")

    <!-- 推荐图文内容 -->
@include("frontend/bootstrap/sidebar/sidebar3")

    <!-- 推荐论坛帖子 -->
@include("frontend/bootstrap/sidebar/sidebar4")

    <!-- 热门话题 -->
@include("frontend/bootstrap/sidebar/sidebar5")

    <!-- 热门标签 -->
@include("frontend/bootstrap/sidebar/sidebar7")

    <!-- 推荐用户 -->
@include("frontend/bootstrap/sidebar/sidebar8")

    <!-- 推荐活动 -->
@include("frontend/bootstrap/sidebar/sidebar9")

    <!-- 推荐群组 -->
@include("frontend/bootstrap/sidebar/sidebar10")

    <!-- 赞助商 -->
    @include("frontend/bootstrap/sidebar/sidebar11")


    <!-- 推荐关注 -->
@include("frontend/bootstrap/sidebar/sidebar12")

    <!-- 热门话题 -->
@include("frontend/bootstrap/sidebar/sidebar13")

    <!-- 互动动态 -->
    @include("frontend/bootstrap/sidebar/sidebar14")

    <style>
        /* 推荐关注 */
        .sidebar-card .widget-content .suggestion-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 1.25rem;
            transition: background-color 0.2s;
        }

        .sidebar-card .widget-content .suggestion-item:hover {
            background-color: var(--light);
        }

        .sidebar-card .widget-content .suggestion-item .suggestion-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 1rem;
        }

        .sidebar-card .widget-content .suggestion-item .suggestion-info {
            flex: 1;
        }

        .sidebar-card .widget-content .suggestion-item .suggestion-name {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 0;
        }

        .sidebar-card .widget-content .suggestion-item .suggestion-meta {
            color: var(--gray);
            font-size: 0.8rem;
        }

        .sidebar-card .widget-content .suggestion-item .follow-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.35rem 0.75rem;
            font-weight: 500;
            font-size: 0.85rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .sidebar-card .widget-content .suggestion-item .follow-btn:hover {
            background-color: #365899;
        }

        .sidebar-card .widget-content .suggestion-item .follow-btn.following {
            background-color: transparent;
            color: var(--dark);
            border: 1px solid var(--border);
        }

        .sidebar-card .widget-content .suggestion-item .follow-btn.following:hover {
            background-color: var(--light);
            color: var(--danger);
            border-color: var(--danger);
        }

        /* 热门话题 */
        .sidebar-card .widget-content .trending-item {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .sidebar-card .widget-content .trending-item:last-child {
            border-bottom: none;
        }

        .sidebar-card .widget-content .trending-item:hover {
            background-color: var(--light);
        }

        .sidebar-card .widget-content .trending-item .trending-category {
            color: var(--gray);
            font-size: 0.8rem;
            margin-bottom: 0.25rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .sidebar-card .widget-content .trending-item .trending-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
            line-height: 1.3;
        }

        .sidebar-card .widget-content .trending-item .trending-stats {
            color: var(--gray);
            font-size: 0.8rem;
        }

        /* 最近活动 */
        .sidebar-card .widget-content .activity-item {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border);
            transition: background-color 0.2s;
        }

        .sidebar-card .widget-content .activity-item:last-child {
            border-bottom: none;
        }

        .sidebar-card .widget-content .activity-item:hover {
            background-color: var(--light);
        }

        .sidebar-card .widget-content .activity-item .activity-content {
            display: flex;
        }

        .sidebar-card .widget-content .activity-item .activity-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-card .widget-content .activity-item .activity-icon.like {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--danger);
        }

        .sidebar-card .widget-content .activity-item .activity-icon.comment {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success);
        }

        .sidebar-card .widget-content .activity-item .activity-icon.follow {
            background-color: rgba(26, 145, 218, 0.1);
            color: var(--secondary);
        }

        .sidebar-card .widget-content .activity-item .activity-text {
            flex: 1;
            font-size: 0.9rem;
        }

        .sidebar-card .widget-content .activity-item .activity-text strong {
            font-weight: 600;
        }

        .sidebar-card .widget-content .activity-item .activity-time {
            color: var(--gray);
            font-size: 0.8rem;
            margin-top: 0.25rem;
        }

        /* 查看更多链接 */
        .sidebar-card .view-more {
            display: block;
            padding: 1rem 1.25rem;
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            text-align: center;
            transition: background-color 0.2s;
        }

        .sidebar-card .view-more:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }


    </style>
    <!-- 推荐关注 -->
@include("frontend/bootstrap/sidebar/sidebar15")

    <!-- 热门话题 -->
@include("frontend/bootstrap/sidebar/sidebar16")

    <!-- 最近活动 -->
    @include("frontend/bootstrap/sidebar/sidebar17")

    <!-- 当前用户信息 -->
@include("frontend/bootstrap/sidebar/sidebar18")

    <!-- 推荐用户 -->
@include("frontend/bootstrap/sidebar/sidebar19")

    <!-- 推荐文章 -->
@include("frontend/bootstrap/sidebar/sidebar20")

    <!-- 图文内容 -->
@include("frontend/bootstrap/sidebar/sidebar21")

    <!-- 热门话题 -->
@include("frontend/bootstrap/sidebar/sidebar22")

    <!-- 热门标签 -->
@include("frontend/bootstrap/sidebar/sidebar23")

    <!-- 推荐论坛 -->
@include("frontend/bootstrap/sidebar/sidebar24")

    <!-- 推荐群组 -->
@include("frontend/bootstrap/sidebar/sidebar25")

    <!-- 通知 -->
    @include("frontend/bootstrap/sidebar/sidebar26")


</div>


</body>
</html>

